<script setup lang="ts">
import { onMounted, ref} from 'vue'
import Logo from '@/assets/logo.png'
import { useAllMusicStore } from '@/stores'
import PlayListHeader from "@/components/playlist/PlayListHeader.vue";
import PlayListTab from "@/components/playlist/PlayListTab.vue";
import { handleWheel } from '@/composables/useWheelEvent'

const musicStore = useAllMusicStore()

defineExpose({
  handleScroll () {
    musicStore.MoreData()
  }
})

onMounted(()=>{
  musicStore.initFirstData({ page: 1, sort: "title", order: "asc"})
})

const wrapper = ref<HTMLElement | null>(null)

</script>

<template>
  <div class="wrapper" ref="wrapper" @wheel.prevent="handleWheel($event,50)">
    <PlayListHeader title="音乐馆" :songs="[]" :logo="Logo" ></PlayListHeader>
    <PlayListTab :songs="musicStore.musicList"></PlayListTab>
  </div>
</template>

<style lang="scss" scoped>
.wrapper{
  position: relative;
}
</style>